<template>
  <view :class="productConClass">
    <view v-if="storeInfo.id">
      <!-- 轮播图 -->
      <product-con-swiper :img-urls="storeInfo.sliderImageArr"></product-con-swiper>

      <!-- 商品信息描述 -->
      <view class="wrapper">
        <view class="share acea-row row-between row-bottom">
          <view class="money font-color-red" v-if="!isIntegral">
            <text>￥</text>
            <text class="num">{{ attr.productSelect.price || storeInfo.price }}</text>
            <text class="vip-money" v-if="storeInfo.vipPrice && storeInfo.vipPrice > 0">￥{{ attr.productSelect.vipPrice || storeInfo.vipPrice }}</text>
            <image :src="`${$VUE_APP_RESOURCES_URL}/images/vip.png`" class="image" v-if="storeInfo.vipPrice && storeInfo.vipPrice > 0" />
          </view>
          <view class="money font-color-red" v-if="isIntegral">
            <text class="num">{{ attr.productSelect.integral || storeInfo.integral }}积分</text>
          </view>
          <view class="iconfont icon-fenxiang" @click="listenerActionSheet"></view>
        </view>
        <view class="introduce">{{ storeInfo.storeName }}</view>
        <view class="label acea-row row-between-wrapper">
          <text v-if="!isIntegral">原价:￥{{ storeInfo.otPrice }}</text>
          <text>库存:{{ storeInfo.stock }}{{ storeInfo.unitName }}</text>
          <text>销量:{{ storeInfo.sales }}{{ storeInfo.unitName }}</text>
        </view>
        <view class="coupon acea-row row-between-wrapper" @click="couponTap" v-if="couponList.length">
          <text class="hide line1">
            <text>优惠券：</text>
            <text class="activity" v-for="(item, couponListEq) in couponList" :key="couponListEq">满{{ item.useMinPrice }}减{{ item.couponPrice }}</text>
          </text>
          <view class="iconfont icon-jiantou"></view>
        </view>
      </view>

      <!-- 运费 -->
      <div class="attribute acea-row row-between-wrapper">
        <div>
          运费：
          <span class="atterTxt">{{ tempName }}</span>
        </div>
      </div>

      <!-- 规格 -->
      <view class="attribute acea-row row-between-wrapper" @click="selecAttrTap">
        <view>
          <text>{{ attrTxt }}：</text>
          <text class="atterTxt">{{ attrValue }}</text>
        </view>
        <view class="iconfont icon-jiantou"></view>
      </view>

      <!-- 门店信息 -->
      <view class="store-info" v-if="systemStore">
        <view class="title acea-row row-between-wrapper">
          <view>门店信息</view>
          <text @click="goStoreList()" class="praise">
            更多
            <text class="iconfont icon-jiantou"></text>
          </text>
        </view>
        <view class="info acea-row row-between-wrapper">
          <view class="picTxt acea-row row-between-wrapper">
            <view class="pictrue">
              <image :src="systemStore.image" />
            </view>
            <view class="text">
              <view class="name line1">{{ systemStore.name }}</view>
              <view class="address acea-row row-middle" @click="showChang(systemStore)">
                <text class="addressTxt">{{ systemStore.address }}</text>
                <text class="iconfont icon-youjian"></text>
              </view>
            </view>
            <view class="addressBox">
              <a class="iconfont icon-dadianhua01 font-color-red phone" @click="telPhone(systemStore.phone)"></a>
              <view class="addressTxt corlor-yshop">距离{{ systemStore.distance }}千米</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 用户评价 -->
      <view class="userEvaluation" v-if="replyCount">
        <view class="title acea-row row-between-wrapper">
          <view>用户评价({{ replyCount }})</view>
          <text @click="goEvaluateList(id)" class="praise">
            <text class="font-color-red">{{ replyChance }}%</text>好评率
            <text class="iconfont icon-jiantou"></text>
          </text>
        </view>
        <user-evaluation :reply="reply"></user-evaluation>
      </view>

      <!-- 商品推荐 -->
      <!-- <view class="superior">
        <view class="title acea-row row-center-wrapper">
          <image :src="`${$VUE_APP_RESOURCES_URL}/images/ling.png`" />
          <text class="titleTxt">优品推荐</text>
          <image :src="`${$VUE_APP_RESOURCES_URL}/images/ling.png`" />
        </view>
        <template>
          <view class="slider-banner banner">
            <swiper :options="swiperRecommend" v-if="goodList.length > 0">
              <swiper-slide v-for="(item, eq2) in goodList" :key="eq2">
                <view class="list acea-row row-middle">
                  <view class="item" v-for="val in item.list" :key="val.image">
                    <view class="pictrue">
                      <image :src="val.image" />
                    </view>
                    <view class="name line1">{{ val.store_name }}}</view>
                    <view class="money font-color-red">¥{{ val.price }}</view>
                  </view>
                </view>
              </swiper-slide>
              <view class="swiper-pagination" slot="pagination"></view>
            </swiper>
          </view>
        </template>
      </view> -->

      <!-- 商品详情 -->
      <view class="product-intro">
        <text class="title"><text>产品介绍</text></text>
        <view class="conter" v-html="storeInfo.description"></view>
      </view>

      <view style="height: 100rpx"></view>
      <!-- 操作栏 -->
      <view class="footer acea-row row-between-wrapper">
        <!-- #ifdef MP-WEIXIN -->
        <view class="item">
          <button open-type="contact" class="contacButton">
            <view style="padding-bottom: 8rpx" class="item">
              <view class="iconfont icon-kefu"></view>
              <text>客服</text>
            </view>
          </button>
        </view>
        <!-- #endif -->
        <view class="item" @click="goHome">
          <view class="iconfont icon-shouye-xianxing"></view>
          <text>首页</text>
        </view>
        <view class="item" @click="setCollect" v-if="storeInfo.userCollect">
          <view class="iconfont icon-shoucang1"></view>
          <text>收藏</text>
        </view>
        <view class="item" @click="setCollect" v-if="!storeInfo.userCollect">
          <view class="iconfont icon-shoucang"></view>
          <text>收藏</text>
        </view>
        <view @click="goShoppingCart()" v-if="animated" class="item animated bounceIn">
          <view class="iconfont icon-gouwuche1">
            <text class="num bg-color-red" v-if="CartCount > 0">{{ CartCount }}</text>
          </view>
          <text>购物车</text>
        </view>
        <view @click="goShoppingCart()" class="item animated" v-if="!animated">
          <view class="iconfont icon-gouwuche1">
            <text class="num bg-color-red" v-if="CartCount > 0">{{ CartCount }}</text>
          </view>
          <text>购物车</text>
        </view>
        <view class="bnt acea-row">
          <view class="joinCart" @click="joinCart">
            <text>加入购物车</text>
          </view>
          <view class="buy" @click="tapBuy">
            <text>立即购买</text>
          </view>
        </view>
      </view>

      <!-- 优惠券 -->
      <CouponPop v-on:changeFun="changeFun" :coupon="coupon"></CouponPop>
      <!-- 商品规格弹窗 -->
      <ProductWindow :isIntegral="isIntegral" v-on:changeFun="changeFun" :attr="attr" :cartNum="cart_num"></ProductWindow>
      <!-- 分享海报 -->
      <StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus" :posterData="posterData" :goodId="id"></StorePoster>
      <!-- 分享弹窗 -->
      <ShareInfo v-on:setShareInfoStatus="setShareInfoStatus" :shareInfoStatus="shareInfoStatus"></ShareInfo>

      <view class="generate-posters acea-row row-middle on" v-if="posters">
        <view class="item" @click="setPosterImageStatus">
          <view class="iconfont icon-haibao"></view>
          <view>生成海报</view>
        </view>
      </view>
      <view class="generate-posters acea-row row-middle" v-if="!posters">
        <view class="item" @click="setPosterImageStatus">
          <view class="iconfont icon-haibao"></view>
          <view>生成海报</view>
        </view>
      </view>
      <view class="mask" @touchmove.prevent @click="listenerActionClose" v-show="posters"></view>
      <view class="posterCanvasWarp">
        <canvas class="posterCanvas" canvas-id="myCanvas"></canvas>
      </view>
    </view>
  </view>
</template>

<template>
  <view :class="productConClass">
    <view v-if="storeInfo.id">
      <!-- 轮播图 -->
      <product-con-swiper :img-urls="storeInfo.sliderImageArr"></product-con-swiper>

      <!-- 商品信息描述 -->
      <view class="wrapper">
        <view class="share acea-row row-between row-bottom">
          <view class="money font-color-red" v-if="!isIntegral">
            <text>￥</text>
            <text class="num">{{ attr.productSelect.price || storeInfo.price }}</text>
            <text class="vip-money" v-if="storeInfo.vipPrice && storeInfo.vipPrice > 0">￥{{ attr.productSelect.vipPrice || storeInfo.vipPrice }}</text>
            <image :src="`${$VUE_APP_RESOURCES_URL}/images/vip.png`" class="image" v-if="storeInfo.vipPrice && storeInfo.vipPrice > 0" />
          </view>
          <view class="money font-color-red" v-if="isIntegral">
            <text class="num">{{ attr.productSelect.integral || storeInfo.integral }}积分</text>
          </view>
          <view class="iconfont icon-fenxiang" @click="listenerActionSheet"></view>
        </view>
        <view class="introduce">{{ storeInfo.storeName }}</view>
        <view class="label acea-row row-between-wrapper">
          <text v-if="!isIntegral">原价:￥{{ storeInfo.otPrice }}</text>
          <text>库存:{{ storeInfo.stock }}{{ storeInfo.unitName }}</text>
          <text>销量:{{ storeInfo.sales }}{{ storeInfo.unitName }}</text>
        </view>
        <view class="coupon acea-row row-between-wrapper" @click="couponTap" v-if="couponList.length">
          <text class="hide line1">
            <text>优惠券：</text>
            <text class="activity" v-for="(item, couponListEq) in couponList" :key="couponListEq">满{{ item.useMinPrice }}减{{ item.couponPrice }}</text>
          </text>
          <view class="iconfont icon-jiantou"></view>
        </view>
      </view>

      <!-- 运费 -->
      <div class="attribute acea-row row-between-wrapper">
        <div>
          运费：
          <span class="atterTxt">{{ tempName }}</span>
        </div>
      </div>

      <!-- 规格 -->
      <view class="attribute acea-row row-between-wrapper" @click="selecAttrTap">
        <view>
          <text>{{ attrTxt }}：</text>
          <text class="atterTxt">{{ attrValue }}</text>
        </view>
        <view class="iconfont icon-jiantou"></view>
      </view>

      <!-- 门店信息 -->
      <view class="store-info" v-if="systemStore">
        <view class="title acea-row row-between-wrapper">
          <view>门店信息</view>
          <text @click="goStoreList()" class="praise">
            更多
            <text class="iconfont icon-jiantou"></text>
          </text>
        </view>
        <view class="info acea-row row-between-wrapper">
          <view class="picTxt acea-row row-between-wrapper">
            <view class="pictrue">
              <image :src="systemStore.image" />
            </view>
            <view class="text">
              <view class="name line1">{{ systemStore.name }}</view>
              <view class="address acea-row row-middle" @click="showChang(systemStore)">
                <text class="addressTxt">{{ systemStore.address }}</text>
                <text class="iconfont icon-youjian"></text>
              </view>
            </view>
            <view class="addressBox">
              <a class="iconfont icon-dadianhua01 font-color-red phone" @click="telPhone(systemStore.phone)"></a>
              <view class="addressTxt corlor-yshop">距离{{ systemStore.distance }}千米</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 用户评价 -->
      <view class="userEvaluation" v-if="replyCount">
        <view class="title acea-row row-between-wrapper">
          <view>用户评价({{ replyCount }})</view>
          <text @click="goEvaluateList(id)" class="praise">
            <text class="font-color-red">{{ replyChance }}%</text>好评率
            <text class="iconfont icon-jiantou"></text>
          </text>
        </view>
        <user-evaluation :reply="reply"></user-evaluation>
      </view>

      <!-- 商品推荐 -->
      <!-- <view class="superior">
        <view class="title acea-row row-center-wrapper">
          <image :src="`${$VUE_APP_RESOURCES_URL}/images/ling.png`" />
          <text class="titleTxt">优品推荐</text>
          <image :src="`${$VUE_APP_RESOURCES_URL}/images/ling.png`" />
        </view>
        <template>
          <view class="slider-banner banner">
            <swiper :options="swiperRecommend" v-if="goodList.length > 0">
              <swiper-slide v-for="(item, eq2) in goodList" :key="eq2">
                <view class="list acea-row row-middle">
                  <view class="item" v-for="val in item.list" :key="val.image">
                    <view class="pictrue">
                      <image :src="val.image" />
                    </view>
                    <view class="name line1">{{ val.store_name }}}</view>
                    <view class="money font-color-red">¥{{ val.price }}</view>
                  </view>
                </view>
              </swiper-slide>
              <view class="swiper-pagination" slot="pagination"></view>
            </swiper>
          </view>
        </template>
      </view> -->

      <!-- 商品详情 -->
      <view class="product-intro">
        <text class="title"><text>产品介绍</text></text>
        <view class="conter" v-html="storeInfo.description"></view>
      </view>

      <view style="height: 100rpx"></view>
      <!-- 操作栏 -->
      <view class="footer acea-row row-between-wrapper">
        <!-- #ifdef MP-WEIXIN -->
        <view class="item">
          <button open-type="contact" class="contacButton">
            <view style="padding-bottom: 8rpx" class="item">
              <view class="iconfont icon-kefu"></view>
              <text>客服</text>
            </view>
          </button>
        </view>
        <!-- #endif -->
        <view class="item" @click="goHome">
          <view class="iconfont icon-shouye-xianxing"></view>
          <text>首页</text>
        </view>
        <view class="item" @click="setCollect" v-if="storeInfo.userCollect">
          <view class="iconfont icon-shoucang1"></view>
          <text>收藏</text>
        </view>
        <view class="item" @click="setCollect" v-if="!storeInfo.userCollect">
          <view class="iconfont icon-shoucang"></view>
          <text>收藏</text>
        </view>
        <view @click="goShoppingCart()" v-if="animated" class="item animated bounceIn">
          <view class="iconfont icon-gouwuche1">
            <text class="num bg-color-red" v-if="CartCount > 0">{{ CartCount }}</text>
          </view>
          <text>购物车</text>
        </view>
        <view @click="goShoppingCart()" class="item animated" v-if="!animated">
          <view class="iconfont icon-gouwuche1">
            <text class="num bg-color-red" v-if="CartCount > 0">{{ CartCount }}</text>
          </view>
          <text>购物车</text>
        </view>
        <view class="bnt acea-row">
          <view class="joinCart" @click="joinCart">
            <text>加入购物车</text>
          </view>
          <view class="buy" @click="tapBuy">
            <text>立即购买</text>
          </view>
        </view>
      </view>

      <!-- 优惠券 -->
      <CouponPop v-on:changeFun="changeFun" :coupon="coupon"></CouponPop>
      <!-- 商品规格弹窗 -->
      <ProductWindow :isIntegral="isIntegral" v-on:changeFun="changeFun" :attr="attr" :cartNum="cart_num"></ProductWindow>
      <!-- 分享海报 -->
      <StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus" :posterData="posterData" :goodId="id"></StorePoster>
      <!-- 分享弹窗 -->
      <ShareInfo v-on:setShareInfoStatus="setShareInfoStatus" :shareInfoStatus="shareInfoStatus"></ShareInfo>

      <view class="generate-posters acea-row row-middle on" v-if="posters">
        <view class="item" @click="setPosterImageStatus">
          <view class="iconfont icon-haibao"></view>
          <view>生成海报</view>
        </view>
      </view>
      <view class="generate-posters acea-row row-middle" v-if="!posters">
        <view class="item" @click="setPosterImageStatus">
          <view class="iconfont icon-haibao"></view>
          <view>生成海报</view>
        </view>
      </view>
      <view class="mask" @touchmove.prevent @click="listenerActionClose" v-show="posters"></view>
      <view class="posterCanvasWarp">
        <canvas class="posterCanvas" canvas-id="myCanvas"></canvas>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import ProductConSwiper from '@/components/ProductConSwiper.vue'
import UserEvaluation from '@/components/UserEvaluation.vue'
import CouponPop from '@/components/CouponPop.vue'
import ProductWindow from '@/components/ProductWindow.vue'
import StorePoster from '@/components/StorePoster.vue'
import ShareInfo from '@/components/ShareInfo.vue'
import { getProductDetail, postCartAdd, getCartCount, getProductCode } from '@/api/store'
import { getCoupon, getCollectAdd, getCollectDel, getUserInfo } from '@/api/user'
import cookie from '@/utils/store/cookie'
import { isWeixin, handleQrCode, handleUrlParam, getCurrentPageUrlWithArgs } from '@/utils'
import { wechatEvevt } from '@/libs/wechat'
import { useStore } from 'vuex'

// 定义响应式数据
const store = useStore()
const shareInfoStatus = ref(false)
const weixinStatus = ref(false)
const mapShow = ref(false)
const mapKey = ref('')
const posterData = reactive({
  image: '',
  title: '',
  price: '',
  code: '',
})
const posterImageStatus = ref(false)
const animated = ref(false)
const coupon = reactive({
  coupon: false,
  list: [],
})
const attr = reactive({
  cartAttr: false,
  productAttr: [],
  productSelect: {},
})
const isOpen = ref(false)
const productValue = ref([])
const id = ref(0)
const storeInfo = ref({})
const couponList = ref([])
const attrTxt = ref('请选择')
const attrValue = ref('')
const cart_num = ref(1)
const replyCount = ref('')
const replyChance = ref('')
const reply = ref([])
const priceName = ref(0)
const CartCount = ref(0)
const posters = ref(false)
const banner = ref([{}, {}])
const goodList = ref([])
const systemStore = ref({})
const productConClass = ref('product-con')
const tempName = ref('全国包邮')
const isIntegral = ref(false)

// 计算属性
const isLogin = computed(() => store.getters.isLogin)
const location = computed(() => store.getters.location)

// 方法定义
const goHome = () => {
  uni.switchTab('/pages/home/index')
}

const goShoppingCart = () => {
  uni.switchTab('/pages/shop/ShoppingCart/index')
}

const goCustomerList = () => {
  uni.navigateTo({
    url: '/pages/user/CustomerList/index'
  })
}

const goStoreList = () => {
  uni.navigateTo({
    url: '/pages/shop/StoreList/index'
  })
}

const goEvaluateList = (id) => {
  uni.navigateTo({
    url: `/pages/shop/EvaluateList/index?id=${id}`
  })
}

const telPhone = (phoneNumber) => {
  uni.makePhoneCall({
    phoneNumber: phoneNumber,
    fail() {
      console.log('取消拨打')
    },
  })
}

const showChang = (data) => {
  uni.navigateTo({
    url: `/pages/map/index?${Object.keys(data).map(key => `${key}=${data[key]}`).join('&')}`
  })
}

const setShareInfoStatus = () => {
  shareInfoStatus.value = !shareInfoStatus.value
  posters.value = false
}

const shareCode = () => {
  getProductCode(id.value).then(res => {
    posterData.code = res.data.code
    listenerActionSheet()
  })
}

const setPosterImageStatus = () => {
  posterImageStatus.value = !posterImageStatus.value
  posters.value = false
}

// 产品详情接口
const productCon = () => {
  let from = location.value
  if (uni.getSystemInfoSync().platform == 'app') {
    from.from = 'app'
  }

  uni.showLoading({
    title: '加载中',
    mask: true,
  })

  getProductDetail(id.value, from)
    .then(res => {
      res.data.storeInfo.description = res.data.storeInfo.description.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
      storeInfo.value = res.data.storeInfo
      attr.productAttr = res.data.productAttr
      productValue.value = res.data.productValue
      replyCount.value = res.data.replyCount
      replyChance.value = res.data.replyChance
      reply.value = res.data.reply ? [res.data.reply] : []
      priceName.value = res.data.priceName
      tempName.value = res.data.tempName
      posterData.image = storeInfo.value.image

      if (storeInfo.value.storeName.length > 30) {
        posterData.title = storeInfo.value.storeName.substring(0, 30) + '...'
      } else {
        posterData.title = storeInfo.value.storeName
      }

      posterData.price = storeInfo.value.price
      posterData.code = storeInfo.value.codeBase
      systemStore.value = res.data.systemStore

      let good_list = res.data.goodList || []
      let goodArray = []
      let count = Math.ceil(good_list.length / 6)

      for (let i = 0; i < count; i++) {
        var list = good_list.slice(i * 6, 6)
        if (list.length)
          goodArray.push({
            list: list,
          })
      }

      mapKey.value = res.data.mapKay
      goodList.value = goodArray
      updateTitle()
      DefaultSelect()
      getCartCountFn()
    })
    .catch(err => {
      uni.showToast({
        title: err.msg || err.response.data.msg || err.response.data.message,
        icon: 'none',
        duration: 2000,
      })
    })
    .finally(() => {
      uni.hideLoading()
    })
}

// 默认选中属性
const DefaultSelect = () => {
  let productAttr = attr.productAttr
  let value = []

  for (let i = 0; i < productAttr.length; i++) {
    productAttr[i].index = 0
    value.push(productAttr[i].attrValueArr[0])
  }

  // sort();排序函数:数字-英文-汉字；
  let productSelect = productValue.value[value.sort().join(',')]

  if (productSelect && productAttr.length) {
    attr.productSelect.store_name = storeInfo.value.storeName
    attr.productSelect.image = productSelect.image
    attr.productSelect.price = productSelect.price
    attr.productSelect.stock = productSelect.stock
    attr.productSelect.unique = productSelect.unique
    attr.productSelect.integral = productSelect.integral
    attr.productSelect.cart_num = 1
    attrValue.value = value.sort().join(',')
    attrTxt.value = '已选择'
  } else if (!productSelect && productAttr.length) {
    attr.productSelect.store_name = storeInfo.value.storeName
    attr.productSelect.image = storeInfo.value.image
    attr.productSelect.price = storeInfo.value.price
    attr.productSelect.integral = storeInfo.value.integral
    attr.productSelect.stock = 0
    attr.productSelect.unique = ''
    attr.productSelect.cart_num = 0
    attrValue.value = ''
    attrTxt.value = '请选择'
  } else if (!productSelect && !productAttr.length) {
    attr.productSelect.store_name = storeInfo.value.storeName
    attr.productSelect.image = storeInfo.value.image
    attr.productSelect.price = storeInfo.value.price
    attr.productSelect.stock = storeInfo.value.stock
    attr.productSelect.integral = storeInfo.value.integral
    attr.productSelect.unique = storeInfo.value.unique || ''
    attr.productSelect.cart_num = 1
    attrValue.value = ''
    attrTxt.value = '请选择'
  }
}

// 购物车
const ChangeCartNum = (changeValue) => {
  // changeValue:是否 加|减
  // 获取当前变动属性
  let productSelect = productValue.value[attrValue.value]
  // 如果没有属性,赋值给商品默认库存
  if (productSelect === undefined && !attr.productAttr.length) {
    productSelect = attr.productSelect
  }
  // 无属性值即库存为0；不存在加减；
  if (productSelect === undefined) return

  let stock = productSelect.stock || 0
  let num = attr.productSelect

  if (changeValue) {
    num.cart_num++
    if (num.cart_num > stock) {
      attr.productSelect.cart_num = stock
      cart_num.value = stock
    } else {
      attr.productSelect.cart_num = num.cart_num
      cart_num.value = num.cart_num
    }
  } else {
    num.cart_num--
    if (num.cart_num < 1) {
      attr.productSelect.cart_num = 1
      cart_num.value = 1
    } else {
      attr.productSelect.cart_num = num.cart_num
      cart_num.value = num.cart_num
    }
  }
}

// 将父级向子集多次传送的函数合二为一；
const changeFun = (opt) => {
  if (typeof opt !== 'object') opt = {}
  let action = opt.action || ''
  let value = opt.value === undefined ? '' : opt.value
  if (action && typeof eval(action) === 'function') {
    eval(action)(value)
  }
}

// 打开优惠券插件；
const couponTap = () => {
  coupons()
  coupon.coupon = true
}

const changecoupon = (msg) => {
  coupon.coupon = msg
  coupons()
}

const currentcoupon = (res) => {
  coupon.coupon = false
  coupon.list[res].is_use = true
}

// 可领取优惠券接口；
const coupons = () => {
  let q = {
    page: 1,
    limit: 20,
  }

  getCoupon(q).then(res => {
    couponList.value = res.data || []
    coupon.list = res.data
  })
}

// 打开属性插件；
const selecAttrTap = () => {
  attr.cartAttr = true
  isOpen.value = true
}

const changeattr = (msg) => {
  // 修改了规格
  console.log(msg)
  attr.cartAttr = msg
  isOpen.value = false
}

// 选择属性；
const ChangeAttr = (res) => {
  // 修改了规格
  let productSelect = productValue.value[res.value]
  console.log(productSelect)

  if (productSelect) {
    attr.productAttr[res.indexw].index = res.indexn
    attr.productSelect.image = productSelect.image
    attr.productSelect.price = productSelect.price
    attr.productSelect.stock = productSelect.stock
    attr.productSelect.unique = productSelect.unique
    attr.productSelect.integral = productSelect.integral
    attr.productSelect.cart_num = 1
    attrValue.value = res.value
    attrTxt.value = '已选择'
  } else {
    attr.productSelect.image = storeInfo.value.image
    attr.productSelect.price = storeInfo.value.price
    attr.productSelect.integral = storeInfo.value.price
    attr.productSelect.stock = 0
    attr.productSelect.unique = ''
    attr.productSelect.cart_num = 0
    attrValue.value = ''
    attrTxt.value = '请选择'
  }
}

// 收藏商品
const setCollect = () => {
  let productId = storeInfo.value.id
  let category = 'product'
  let type = 'collect'

  if (storeInfo.value.userCollect) {
    getCollectDel(productId, category, type).then(function() {
      storeInfo.value.userCollect = !storeInfo.value.userCollect
    })
  } else {
    getCollectAdd(productId, category, type).then(function() {
      storeInfo.value.userCollect = !storeInfo.value.userCollect
    })
  }
}

// 点击加入购物车按钮
const joinCart = () => {
  // 0=加入购物车
  goCat(0)
}

// 加入购物车；
const goCat = (news) => {
  let productSelect = productValue.value[attrValue.value]
  // 打开属性
  if (attrValue.value) {
    // 默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
    attr.cartAttr = !isOpen.value ? true : false
  } else {
    if (isOpen.value) attr.cartAttr = true
    else attr.cartAttr = !attr.cartAttr
  }
  // 只有关闭属性弹窗时进行加入购物车
  if (attr.cartAttr === true && isOpen.value === false) return (isOpen.value = true)
  // 如果有属性,没有选择,提示用户选择
  if (attr.productAttr.length && productSelect === undefined && isOpen.value === true) {
    uni.showToast({
      title: '产品库存不足，请选择其它',
      icon: 'none',
      duration: 2000,
    })
    return
  }

  let q = {
    productId: id.value,
    cartNum: attr.productSelect.cart_num,
    new: news,
    uniqueId: attr.productSelect !== undefined ? attr.productSelect.unique : '',
  }

  postCartAdd(q)
    .then(function(res) {
      console.log(res)
      isOpen.value = false
      attr.cartAttr = false

      if (news) {
        if (!res.data) {
          uni.showToast({
            title: res.msg || res.data.msg || res.data.message,
            icon: 'none',
            duration: 2000,
          })
          return
        }

        uni.navigateTo({
          url: `/pages/order/OrderSubmission/index?id=${res.data.cartId}&isIntegral=${isIntegral.value}`
        })
      } else {
        uni.showToast({
          title: '添加购物车成功',
          icon: 'success',
          duration: 2000,
          complete: () => {
            getCartCountFn(true)
          },
        })
      }
    })
    .catch(error => {
      console.log(error)
      isOpen.value = false
      uni.showToast({
        title: error.msg || error.response.data.msg || error.response.data.message,
        icon: 'none',
        duration: 2000,
      })
    })
}

// 获取购物车数量
const getCartCountFn = (isAnima?) => {
  if (isLogin.value) {
    getCartCount({
      numType: 0,
    }).then(res => {
      CartCount.value = res.data.count
      // 加入购物车后重置属性
      if (isAnima) {
        animated.value = true
        setTimeout(function() {
          animated.value = false
        }, 500)
      }
    })
  }
}

// 立即购买；
const tapBuy = () => {
  // 1=直接购买
  goCat(1)
}

const listenerActionSheet = () => {
  if (isWeixin() === true) {
    weixinStatus.value = true
  }
  posters.value = true
}

const listenerActionClose = () => {
  posters.value = false
}

const updateTitle = () => {
  // uni.setNavigationBarTitle({
  //   title: storeInfo.value.storeName
  // });
}

// 生命周期钩子
onLoad((options) => {
  store.commit('get_to', 'goodcon')
  let url = handleQrCode()

  if (!url) {
    url = handleUrlParam(getCurrentPageUrlWithArgs())
  }

  const token = cookie.get('login_status')

  if (url && url.id) {
    id.value = url.id
    let urlSpread = parseInt(url.spread)
    if (urlSpread) {
      cookie.set('spread', urlSpread)
    }
  } else {
    id.value = options.id
  }

  isIntegral.value = url.isIntegral == 'true'

  if (!token) {
    productCon()
    return
  }

  coupons()
  productCon()
})

// 监听器
watch(posterImageStatus, (status) => {
  console.log(status)
  if (status) {
    productConClass.value = 'noscroll product-con'
  } else {
    productConClass.value = 'product-con'
  }
})

// 分享配置
const onShareAppMessage = () => {
  return {
    title: storeInfo.value.storeName,
    imageUrl: storeInfo.value.image,
    path: 'pages/shop/GoodsCon/index?id=' + storeInfo.value.id + '&spread=' + uni.getStorageSync('uid') + '&pageType=good&codeType=routine',
    success(res) {
      uni.showToast({
        title: '分享成功',
      })
    },
    fail(res) {
      uni.showToast({
        title: '分享失败',
        icon: 'none',
      })
    },
  }
}
</script>


<style scoped lang="less">
.geoPage {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10000;
}

.product-con .store-info {
  margin-top: 0.2 * 100rpx;
  background-color: #fff;
}

.product-con .store-info .title {
  padding: 0 0.3 * 100rpx;
  font-size: 0.28 * 100rpx;
  color: #282828;
  height: 0.8 * 100rpx;
  line-height: 0.8 * 100rpx;
  border-bottom: 0.01 * 100rpx solid #f5f5f5;
}

.product-con .store-info .info {
  padding: 0 0.3 * 100rpx;
  height: 1.26 * 100rpx;
}

.product-con .store-info .info .picTxt {
  width: 100%;
  display: flex;
  align-items: center;
}

.product-con .store-info .info .picTxt .pictrue {
  width: 0.76 * 100rpx;
  height: 0.76 * 100rpx;
  margin-right: 0.2 * 100rpx;
}

.product-con .store-info .info .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 0.06 * 100rpx;
}

.product-con .store-info .info .picTxt .text {
  flex: 1;
}

.product-con .store-info .info .picTxt .text .name {
  font-size: 0.3 * 100rpx;
  color: #282828;
}

.product-con .store-info .info .picTxt .text .address {
  font-size: 0.24 * 100rpx;
  color: #666;
  margin-top: 0.03 * 100rpx;
}

.product-con .store-info .info .picTxt .text .address .iconfont {
  color: #707070;
  font-size: 0.18 * 100rpx;
  margin-left: 0.1 * 100rpx;
}

.product-con .store-info .info .picTxt .addressBox {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.product-con .store-info .info .picTxt .addressBox .iconfont {
  font-size: 0.4 * 100rpx;
}

.product-con .store-info .info .picTxt .addressBox .addressTxt {
  font-size: 0.24 * 100rpx;
  color: #F25A27;
}

.product-con .store-info .praise {
  font-size: 0.28 * 100rpx;
  color: #808080;
}

.product-con .store-info .praise .iconfont {
  font-size: 0.28 * 100rpx;
}

.product-con .superior {
  background-color: #fff;
  margin-top: 0.2 * 100rpx;
}

.product-con .superior .title {
  height: 0.98 * 100rpx;
}

.product-con .superior .title image {
  width: 0.3 * 100rpx;
  height: 0.3 * 100rpx;
}

.product-con .superior .title .titleTxt {
  margin: 0 0.2 * 100rpx;
  font-size: 0.3 * 100rpx;
  background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  background-image: -webkit-linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  background-image: -moz-linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.product-con .superior .slider-banner {
  width: 6.9 * 100rpx;
  margin: 0 auto;
  padding-bottom: 0.2 * 100rpx;
}

.product-con .superior .slider-banner .list {
  width: 100%;
  padding-bottom: 0.2 * 100rpx;
}

.product-con .superior .slider-banner .list .item {
  width: 2.15 * 100rpx;
  margin: 0 0.22 * 100rpx 0.3 * 100rpx 0;
  font-size: 0.26 * 100rpx;
}

.product-con .superior .slider-banner .list .item:nth-of-type(3n) {
  margin-right: 0;
}

.product-con .superior .slider-banner .list .item .pictrue {
  width: 100%;
  height: 2.15 * 100rpx;
}

.product-con .superior .slider-banner .list .item .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 0.06 * 100rpx;
}

.product-con .superior .slider-banner .list .item .name {
  color: #282828;
  margin-top: 0.12 * 100rpx;
}

.product-con .superior .slider-banner .swiper-pagination-bullet {
  background-color: #999;
}

.product-con .superior .slider-banner .swiper-pagination-bullet-active {
  background-color: #e93323;
}

.mask {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

.product-con .product-intro .conter view {
  width: 100% !important;
}

.generate-posters {
  width: 100%;
  height: 1.7 * 100rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -o-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.generate-posters.on {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
}

.generate-posters .item {
  flex: 50%;
  -webkit-flex: 50%;
  -ms-flex: 50%;
  text-align: center;
}

.generate-posters .item .iconfont {
  font-size: 0.8 * 100rpx;
  color: #5eae72;
}

.generate-posters .item .iconfont.icon-haibao {
  color: #5391f1;
}

.noscroll {
  height: 100%;
  overflow: hidden;
}
</style>
<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import ProductConSwiper from '@/components/ProductConSwiper.vue'
import UserEvaluation from '@/components/UserEvaluation.vue'
import CouponPop from '@/components/CouponPop.vue'
import ProductWindow from '@/components/ProductWindow.vue'
import StorePoster from '@/components/StorePoster.vue'
import ShareInfo from '@/components/ShareInfo.vue'
import { getProductDetail, postCartAdd, getCartCount, getProductCode } from '@/api/store'
import { getCoupon, getCollectAdd, getCollectDel, getUserInfo } from '@/api/user'
import cookie from '@/utils/store/cookie'
import { isWeixin, handleQrCode, handleUrlParam, getCurrentPageUrlWithArgs } from '@/utils'
import { wechatEvevt } from '@/libs/wechat'
import { useStore } from 'vuex'

// 定义响应式数据
const store = useStore()
const shareInfoStatus = ref(false)
const weixinStatus = ref(false)
const mapShow = ref(false)
const mapKey = ref('')
const posterData = reactive({
  image: '',
  title: '',
  price: '',
  code: '',
})
const posterImageStatus = ref(false)
const animated = ref(false)
const coupon = reactive({
  coupon: false,
  list: [],
})
const attr = reactive({
  cartAttr: false,
  productAttr: [],
  productSelect: {},
})
const isOpen = ref(false)
const productValue = ref([])
const id = ref(0)
const storeInfo = ref({})
const couponList = ref([])
const attrTxt = ref('请选择')
const attrValue = ref('')
const cart_num = ref(1)
const replyCount = ref('')
const replyChance = ref('')
const reply = ref([])
const priceName = ref(0)
const CartCount = ref(0)
const posters = ref(false)
const banner = ref([{}, {}])
const goodList = ref([])
const systemStore = ref({})
const productConClass = ref('product-con')
const tempName = ref('全国包邮')
const isIntegral = ref(false)

// 计算属性
const isLogin = computed(() => store.getters.isLogin)
const location = computed(() => store.getters.location)

// 方法定义
const goHome = () => {
  uni.switchTab('/pages/home/index')
}

const goShoppingCart = () => {
  uni.switchTab('/pages/shop/ShoppingCart/index')
}

const goCustomerList = () => {
  uni.navigateTo({
    url: '/pages/user/CustomerList/index'
  })
}

const goStoreList = () => {
  uni.navigateTo({
    url: '/pages/shop/StoreList/index'
  })
}

const goEvaluateList = (id) => {
  uni.navigateTo({
    url: `/pages/shop/EvaluateList/index?id=${id}`
  })
}

const telPhone = (phoneNumber) => {
  uni.makePhoneCall({
    phoneNumber: phoneNumber,
    fail() {
      console.log('取消拨打')
    },
  })
}

const showChang = (data) => {
  uni.navigateTo({
    url: `/pages/map/index?${Object.keys(data).map(key => `${key}=${data[key]}`).join('&')}`
  })
}

const setShareInfoStatus = () => {
  shareInfoStatus.value = !shareInfoStatus.value
  posters.value = false
}

const shareCode = () => {
  getProductCode(id.value).then(res => {
    posterData.code = res.data.code
    listenerActionSheet()
  })
}

const setPosterImageStatus = () => {
  posterImageStatus.value = !posterImageStatus.value
  posters.value = false
}

// 产品详情接口
const productCon = () => {
  let from = location.value
  if (uni.getSystemInfoSync().platform == 'app') {
    from.from = 'app'
  }

  uni.showLoading({
    title: '加载中',
    mask: true,
  })

  getProductDetail(id.value, from)
    .then(res => {
      res.data.storeInfo.description = res.data.storeInfo.description.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
      storeInfo.value = res.data.storeInfo
      attr.productAttr = res.data.productAttr
      productValue.value = res.data.productValue
      replyCount.value = res.data.replyCount
      replyChance.value = res.data.replyChance
      reply.value = res.data.reply ? [res.data.reply] : []
      priceName.value = res.data.priceName
      tempName.value = res.data.tempName
      posterData.image = storeInfo.value.image

      if (storeInfo.value.storeName.length > 30) {
        posterData.title = storeInfo.value.storeName.substring(0, 30) + '...'
      } else {
        posterData.title = storeInfo.value.storeName
      }

      posterData.price = storeInfo.value.price
      posterData.code = storeInfo.value.codeBase
      systemStore.value = res.data.systemStore

      let good_list = res.data.goodList || []
      let goodArray = []
      let count = Math.ceil(good_list.length / 6)

      for (let i = 0; i < count; i++) {
        var list = good_list.slice(i * 6, 6)
        if (list.length)
          goodArray.push({
            list: list,
          })
      }

      mapKey.value = res.data.mapKay
      goodList.value = goodArray
      updateTitle()
      DefaultSelect()
      getCartCountFn()
    })
    .catch(err => {
      uni.showToast({
        title: err.msg || err.response.data.msg || err.response.data.message,
        icon: 'none',
        duration: 2000,
      })
    })
    .finally(() => {
      uni.hideLoading()
    })
}

// 默认选中属性
const DefaultSelect = () => {
  let productAttr = attr.productAttr
  let value = []

  for (let i = 0; i < productAttr.length; i++) {
    productAttr[i].index = 0
    value.push(productAttr[i].attrValueArr[0])
  }

  // sort();排序函数:数字-英文-汉字；
  let productSelect = productValue.value[value.sort().join(',')]

  if (productSelect && productAttr.length) {
    attr.productSelect.store_name = storeInfo.value.storeName
    attr.productSelect.image = productSelect.image
    attr.productSelect.price = productSelect.price
    attr.productSelect.stock = productSelect.stock
    attr.productSelect.unique = productSelect.unique
    attr.productSelect.integral = productSelect.integral
    attr.productSelect.cart_num = 1
    attrValue.value = value.sort().join(',')
    attrTxt.value = '已选择'
  } else if (!productSelect && productAttr.length) {
    attr.productSelect.store_name = storeInfo.value.storeName
    attr.productSelect.image = storeInfo.value.image
    attr.productSelect.price = storeInfo.value.price
    attr.productSelect.integral = storeInfo.value.integral
    attr.productSelect.stock = 0
    attr.productSelect.unique = ''
    attr.productSelect.cart_num = 0
    attrValue.value = ''
    attrTxt.value = '请选择'
  } else if (!productSelect && !productAttr.length) {
    attr.productSelect.store_name = storeInfo.value.storeName
    attr.productSelect.image = storeInfo.value.image
    attr.productSelect.price = storeInfo.value.price
    attr.productSelect.stock = storeInfo.value.stock
    attr.productSelect.integral = storeInfo.value.integral
    attr.productSelect.unique = storeInfo.value.unique || ''
    attr.productSelect.cart_num = 1
    attrValue.value = ''
    attrTxt.value = '请选择'
  }
}

// 购物车
const ChangeCartNum = (changeValue) => {
  // changeValue:是否 加|减
  // 获取当前变动属性
  let productSelect = productValue.value[attrValue.value]
  // 如果没有属性,赋值给商品默认库存
  if (productSelect === undefined && !attr.productAttr.length) {
    productSelect = attr.productSelect
  }
  // 无属性值即库存为0；不存在加减；
  if (productSelect === undefined) return

  let stock = productSelect.stock || 0
  let num = attr.productSelect

  if (changeValue) {
    num.cart_num++
    if (num.cart_num > stock) {
      attr.productSelect.cart_num = stock
      cart_num.value = stock
    } else {
      attr.productSelect.cart_num = num.cart_num
      cart_num.value = num.cart_num
    }
  } else {
    num.cart_num--
    if (num.cart_num < 1) {
      attr.productSelect.cart_num = 1
      cart_num.value = 1
    } else {
      attr.productSelect.cart_num = num.cart_num
      cart_num.value = num.cart_num
    }
  }
}

// 将父级向子集多次传送的函数合二为一；
const changeFun = (opt) => {
  if (typeof opt !== 'object') opt = {}
  let action = opt.action || ''
  let value = opt.value === undefined ? '' : opt.value
  if (action && typeof eval(action) === 'function') {
    eval(action)(value)
  }
}

// 打开优惠券插件；
const couponTap = () => {
  coupons()
  coupon.coupon = true
}

const changecoupon = (msg) => {
  coupon.coupon = msg
  coupons()
}

const currentcoupon = (res) => {
  coupon.coupon = false
  coupon.list[res].is_use = true
}

// 可领取优惠券接口；
const coupons = () => {
  let q = {
    page: 1,
    limit: 20,
  }

  getCoupon(q).then(res => {
    couponList.value = res.data || []
    coupon.list = res.data
  })
}

// 打开属性插件；
const selecAttrTap = () => {
  attr.cartAttr = true
  isOpen.value = true
}

const changeattr = (msg) => {
  // 修改了规格
  console.log(msg)
  attr.cartAttr = msg
  isOpen.value = false
}

// 选择属性；
const ChangeAttr = (res) => {
  // 修改了规格
  let productSelect = productValue.value[res.value]
  console.log(productSelect)

  if (productSelect) {
    attr.productAttr[res.indexw].index = res.indexn
    attr.productSelect.image = productSelect.image
    attr.productSelect.price = productSelect.price
    attr.productSelect.stock = productSelect.stock
    attr.productSelect.unique = productSelect.unique
    attr.productSelect.integral = productSelect.integral
    attr.productSelect.cart_num = 1
    attrValue.value = res.value
    attrTxt.value = '已选择'
  } else {
    attr.productSelect.image = storeInfo.value.image
    attr.productSelect.price = storeInfo.value.price
    attr.productSelect.integral = storeInfo.value.price
    attr.productSelect.stock = 0
    attr.productSelect.unique = ''
    attr.productSelect.cart_num = 0
    attrValue.value = ''
    attrTxt.value = '请选择'
  }
}

// 收藏商品
const setCollect = () => {
  let productId = storeInfo.value.id
  let category = 'product'
  let type = 'collect'

  if (storeInfo.value.userCollect) {
    getCollectDel(productId, category, type).then(function() {
      storeInfo.value.userCollect = !storeInfo.value.userCollect
    })
  } else {
    getCollectAdd(productId, category, type).then(function() {
      storeInfo.value.userCollect = !storeInfo.value.userCollect
    })
  }
}

// 点击加入购物车按钮
const joinCart = () => {
  // 0=加入购物车
  goCat(0)
}

// 加入购物车；
const goCat = (news) => {
  let productSelect = productValue.value[attrValue.value]
  // 打开属性
  if (attrValue.value) {
    // 默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
    attr.cartAttr = !isOpen.value ? true : false
  } else {
    if (isOpen.value) attr.cartAttr = true
    else attr.cartAttr = !attr.cartAttr
  }
  // 只有关闭属性弹窗时进行加入购物车
  if (attr.cartAttr === true && isOpen.value === false) return (isOpen.value = true)
  // 如果有属性,没有选择,提示用户选择
  if (attr.productAttr.length && productSelect === undefined && isOpen.value === true) {
    uni.showToast({
      title: '产品库存不足，请选择其它',
      icon: 'none',
      duration: 2000,
    })
    return
  }

  let q = {
    productId: id.value,
    cartNum: attr.productSelect.cart_num,
    new: news,
    uniqueId: attr.productSelect !== undefined ? attr.productSelect.unique : '',
  }

  postCartAdd(q)
    .then(function(res) {
      console.log(res)
      isOpen.value = false
      attr.cartAttr = false

      if (news) {
        if (!res.data) {
          uni.showToast({
            title: res.msg || res.data.msg || res.data.message,
            icon: 'none',
            duration: 2000,
          })
          return
        }

        uni.navigateTo({
          url: `/pages/order/OrderSubmission/index?id=${res.data.cartId}&isIntegral=${isIntegral.value}`
        })
      } else {
        uni.showToast({
          title: '添加购物车成功',
          icon: 'success',
          duration: 2000,
          complete: () => {
            getCartCountFn(true)
          },
        })
      }
    })
    .catch(error => {
      console.log(error)
      isOpen.value = false
      uni.showToast({
        title: error.msg || error.response.data.msg || error.response.data.message,
        icon: 'none',
        duration: 2000,
      })
    })
}

// 获取购物车数量
const getCartCountFn = (isAnima?) => {
  if (isLogin.value) {
    getCartCount({
      numType: 0,
    }).then(res => {
      CartCount.value = res.data.count
      // 加入购物车后重置属性
      if (isAnima) {
        animated.value = true
        setTimeout(function() {
          animated.value = false
        }, 500)
      }
    })
  }
}

// 立即购买；
const tapBuy = () => {
  // 1=直接购买
  goCat(1)
}

const listenerActionSheet = () => {
  if (isWeixin() === true) {
    weixinStatus.value = true
  }
  posters.value = true
}

const listenerActionClose = () => {
  posters.value = false
}

const updateTitle = () => {
  // uni.setNavigationBarTitle({
  //   title: storeInfo.value.storeName
  // });
}

// 生命周期钩子
onLoad((options) => {
  store.commit('get_to', 'goodcon')
  let url = handleQrCode()

  if (!url) {
    url = handleUrlParam(getCurrentPageUrlWithArgs())
  }

  const token = cookie.get('login_status')

  if (url && url.id) {
    id.value = url.id
    let urlSpread = parseInt(url.spread)
    if (urlSpread) {
      cookie.set('spread', urlSpread)
    }
  } else {
    id.value = options.id
  }

  isIntegral.value = url.isIntegral == 'true'

  if (!token) {
    productCon()
    return
  }

  coupons()
  productCon()
})

// 监听器
watch(posterImageStatus, (status) => {
  console.log(status)
  if (status) {
    productConClass.value = 'noscroll product-con'
  } else {
    productConClass.value = 'product-con'
  }
})

// 分享配置
const onShareAppMessage = () => {
  return {
    title: storeInfo.value.storeName,
    imageUrl: storeInfo.value.image,
    path: 'pages/shop/GoodsCon/index?id=' + storeInfo.value.id + '&spread=' + uni.getStorageSync('uid') + '&pageType=good&codeType=routine',
    success(res) {
      uni.showToast({
        title: '分享成功',
      })
    },
    fail(res) {
      uni.showToast({
        title: '分享失败',
        icon: 'none',
      })
    },
  }
}
</script>


<style scoped lang="less">
.geoPage {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10000;
}

.product-con .store-info {
  margin-top: 0.2 * 100rpx;
  background-color: #fff;
}

.product-con .store-info .title {
  padding: 0 0.3 * 100rpx;
  font-size: 0.28 * 100rpx;
  color: #282828;
  height: 0.8 * 100rpx;
  line-height: 0.8 * 100rpx;
  border-bottom: 0.01 * 100rpx solid #f5f5f5;
}

.product-con .store-info .info {
  padding: 0 0.3 * 100rpx;
  height: 1.26 * 100rpx;
}

.product-con .store-info .info .picTxt {
  width: 100%;
  display: flex;
  align-items: center;
}

.product-con .store-info .info .picTxt .pictrue {
  width: 0.76 * 100rpx;
  height: 0.76 * 100rpx;
  margin-right: 0.2 * 100rpx;
}

.product-con .store-info .info .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 0.06 * 100rpx;
}

.product-con .store-info .info .picTxt .text {
  flex: 1;
}

.product-con .store-info .info .picTxt .text .name {
  font-size: 0.3 * 100rpx;
  color: #282828;
}

.product-con .store-info .info .picTxt .text .address {
  font-size: 0.24 * 100rpx;
  color: #666;
  margin-top: 0.03 * 100rpx;
}

.product-con .store-info .info .picTxt .text .address .iconfont {
  color: #707070;
  font-size: 0.18 * 100rpx;
  margin-left: 0.1 * 100rpx;
}

.product-con .store-info .info .picTxt .addressBox {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.product-con .store-info .info .picTxt .addressBox .iconfont {
  font-size: 0.4 * 100rpx;
}

.product-con .store-info .info .picTxt .addressBox .addressTxt {
  font-size: 0.24 * 100rpx;
  color: #F25A27;
}

.product-con .store-info .praise {
  font-size: 0.28 * 100rpx;
  color: #808080;
}

.product-con .store-info .praise .iconfont {
  font-size: 0.28 * 100rpx;
}

.product-con .superior {
  background-color: #fff;
  margin-top: 0.2 * 100rpx;
}

.product-con .superior .title {
  height: 0.98 * 100rpx;
}

.product-con .superior .title image {
  width: 0.3 * 100rpx;
  height: 0.3 * 100rpx;
}

.product-con .superior .title .titleTxt {
  margin: 0 0.2 * 100rpx;
  font-size: 0.3 * 100rpx;
  background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  background-image: -webkit-linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  background-image: -moz-linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.product-con .superior .slider-banner {
  width: 6.9 * 100rpx;
  margin: 0 auto;
  padding-bottom: 0.2 * 100rpx;
}

.product-con .superior .slider-banner .list {
  width: 100%;
  padding-bottom: 0.2 * 100rpx;
}

.product-con .superior .slider-banner .list .item {
  width: 2.15 * 100rpx;
  margin: 0 0.22 * 100rpx 0.3 * 100rpx 0;
  font-size: 0.26 * 100rpx;
}

.product-con .superior .slider-banner .list .item:nth-of-type(3n) {
  margin-right: 0;
}

.product-con .superior .slider-banner .list .item .pictrue {
  width: 100%;
  height: 2.15 * 100rpx;
}

.product-con .superior .slider-banner .list .item .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 0.06 * 100rpx;
}

.product-con .superior .slider-banner .list .item .name {
  color: #282828;
  margin-top: 0.12 * 100rpx;
}

.product-con .superior .slider-banner .swiper-pagination-bullet {
  background-color: #999;
}

.product-con .superior .slider-banner .swiper-pagination-bullet-active {
  background-color: #e93323;
}

.mask {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

.product-con .product-intro .conter view {
  width: 100% !important;
}

.generate-posters {
  width: 100%;
  height: 1.7 * 100rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -o-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.generate-posters.on {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
}

.generate-posters .item {
  flex: 50%;
  -webkit-flex: 50%;
  -ms-flex: 50%;
  text-align: center;
}

.generate-posters .item .iconfont {
  font-size: 0.8 * 100rpx;
  color: #5eae72;
}

.generate-posters .item .iconfont.icon-haibao {
  color: #5391f1;
}

.noscroll {
  height: 100%;
  overflow: hidden;
}
</style>
